如前一章節中所述，有鑒於學習 React 其實非常仰賴 JavaScript 的一些基本功，因此我會建議一開始先不要著急，在開始 React 的學習之旅前可以先盤點看看以下必須的 JavaScript 基本功是否都已經掌握。當然礙於篇幅限制，我們不會在這邊直接詳細提供所有知識點的相關教學，因此下面我們會著重分別點出為什麼這些特性或語法對於掌握 React 來說是必要的，並提供一些推薦的學習資源。

JavaScript 核心特性 / 語法

必要的知識或概念

• Closure
  • function component 中會大量的應用到 closure 來定義 event handlers 以及配合 hooks，並且以這個特性來保持資料流，因此可以說是 React 最依賴的 JavaScript 特性。務必要完全掌握才能延伸去真正了解 React 的核心概念
  • 推薦學習資源
    • MDN docs
    • 重新認識 JavaScript: Day 19 閉包 Closure
    • 所有的函式都是閉包：談 JS 中的作用域與 Closure
• Arrow function
  • function component 中會很常以 arrow function 來方便的定義 event handlers 或 effect
  • 推薦學習資源
    • Arrow function - MDN docs
• Primitive types & Object types
  • 由於 React 是以 immutable 的概念來設計資料流的，因此對於 object types 以及其 compare 的觀念掌握是不可或缺的基本功
  • 推薦學習資源
    • 重新認識 JavaScript: Day 03 變數與資料型別
    • 重新認識 JavaScript: Day 04 物件、陣列以及型別判斷
    • JS基礎：Primitive type v.s Object types
    • 深入探討 JavaScript 中的參數傳遞：call by value 還是 reference？
    • Compare
      • Object.is - MDN docs
      • Object shallow equal & deep equal
• 陣列內建方法： map、filter、slice
  • 在資料的 immutable update 操作時會大量使用到這些資料操作方法，後面的章節也會比較詳細的介紹
  • 推薦學習資源
    • 陣列的 map() 方法 - MDN docs
    • 陣列的 filter() 方法 - MDN docs
    • 陣列的 slice() 方法 - MDN docs
• 陣列 / 物件的解構賦值、spread、rest
  • 在 props 資料解構和拆分、useState 返回值解構、物件 state immutable update 等地方，都會頻繁的使用到這些陣列與物件的操作語法
  • 推薦學習資源
    • 解構賦值 - MDN docs
    • 在物件解構時使用 rest 語法 - MDN docs
    • Spread 語法 - MDN docs
• 三元運算子
  • JSX 條件式時常用語法
  • 推薦學習資源
    • 三元運算子 - MDN docs
• ES module & import / export
  • React 非常早就擁抱了現代化前端工程中的重要技術：模組化。尤其是在基於 component base 的開發方式下，我們很常會將不同的 component 拆分成不同的檔案，並且互不干擾，只有在有需要時才手動相互引用。ES module 作為目前標準的 JS 模組系統也是必須先熟悉掌握的技術
  • 推薦學習資源
    • 完全解析 JavaScript import、export

不是一開始就必須的，可以有需要時再學

• Promise、async / await
  • 處理一些非同步請求時還是會接觸到 Promise 相關的東西，不過跟 React 本身比較沒有直接關係，可以自己有需求時再補上。當然，無論學不學 React 這還是 JavaScript 中重要的知識點
  • 推薦學習資源
    • JavaScript Promise：簡介
    • 簡單理解 JavaScript Async 和 Await
• Functional programming
  • React 的設計中其實借鑒了很多 functional programming 的 design patterns，尤其是在進入到 function component + hooks 的時代後更加明顯。因此我會非常推薦大家可以另外去補充一些 FP 相關的知識與概念
  • 推薦學習資源
    • First class function
      • JavaScript Functional Programming 指南 - First Class Function
    • Pure function
      • JavaScript Functional Programming 指南 - Pure Function
    • Currying
      • JavaScript Functional Programming 指南 - Curry
    • Compose
      • JavaScript Functional Programming 指南 - 使用 Compose 開發
    • 宣告式(declarative)與命令式(imperative)
      • Imperative vs Declarative JavaScript
    • immutable 與 mutable 的區別
      • Mutable and Immutable Types in JavaScript

其它周邊工具

必要的工具

• Module manager
  • 以一個套件管理器來設定開發環境以及安裝套件還是目前前端的主流方案，React 的開發也不例外。以 node.js 運行的套件管理 npm 或是 yarn 會是你必須掌握的周遍工具
  • 推薦學習資源
    • Setup Node.js by nvm
      • nvm - 版本隨你切
    • npm
      • NPM是什麼？了解Node Package Manager套件管理機制
    • Yarn
      • 官方文件

不是一開始就必須的，可以有需要時再學

以下的環境建置工具雖然對 React 開發來說還是有其必要性，不過現在官方已經有提供了包裝好的一鍵環境建立工具，因此細節的設定掌握可以等有進階客製化的需求時再補上即可。關於開發環境的建置我們會在下一個章節中更詳細的介紹。

• Module bundler
  • 雖然 ES module 語法規格在 2015 年的 ES6 時就已經推出了，但是瀏覽器上的實際原生支援是一直到近兩年才開始慢慢實現，並且相關的整合以及應用也還沒有到非常普及，因此大多情況下我們還是會需要 module bundler 工具來幫我們將本地以 ES module 撰寫的 JS 原始碼們的打包成少數的幾隻 JS 檔案，主流的選擇如：Webpack、Parcel 以及最近非常火紅的 Vite
• Transpiler
  • 在絕大多數情況下，我們都會使用 JSX 語法來進行 React 的開發，因此將 JSX 語法轉換成瀏覽器能夠執行的普通 JS 語法就幾乎成了必要的需求。除了 JSX 語法之外，在 React 官方或社群推薦的寫法 best practice 中也處處可見使用到較新的 ES6+ 語法，像是前文中有提到的陣列解構、物件解構、spread、rest、arrow function…等等，而這些語法仍然會面臨較老舊瀏覽器的向下相容問題
  • 為此，我們會需要稱之為「Transpiler（或稱之為 Source-to-source compiler）」的程式碼靜態轉換工具來幫助我們自動處理上述的轉換。而在 JavaScript 社群中，最主流且熱門的 Transpiler 就是 Babel

2024/2 更新 - 實體書平裝版本預購

在經過快要一年的努力後，本系列文的實體書版本推出了～其中新增並補充了許多鐵人賽版本中沒有的脈絡與細節，並以全彩印刷拉滿視覺上的閱讀體驗，現正熱銷中！有興趣的話歡迎參考看看，也歡迎分享給其他有接觸前端的朋友們，非常感謝大家～

《React 思維進化：一次打破常見的觀念誤解，躍升專業前端開發者》

目前首刷的軟精裝版本各大通路已經幾乎都銷售一空，接下來會再刷推出新的平裝版本：

天瓏（平裝版預購）：
https://www.tenlong.com.tw/products/9786263337695

博客來（平裝版）：
https://www.books.com.tw/products/0010982322

momo（平裝版）：
https://www.momoshop.com.tw/goods/GoodsDetail.jsp?i_code=12528845